<template>
  <el-card v-loading="listLoading" class="form-container" shadow="never">
    <el-form ref="listFrom" :model="list" :rules="rules" label-width="150px">
      <el-form-item label="登录账号：" class="inlineCt">
        <el-input v-model="list.loginName" class="input260" :disabled="true" />
        <el-button type="primary" size="small" @click="handleUpdatePasswordBtn">修改密码</el-button>
      </el-form-item>
      <el-form-item label="手机号：" class="inlineCt">
        <el-input
          v-model="list.mobile"
          class="input260"
          maxlength="11"
          @input="$forceUpdate()"
          @keyup.native="list.mobile = verifyVal('num', list.mobile)"
        />
      </el-form-item>
      <el-form-item v-if="userId != 1" label="头像：">
        <file-upload v-model="list.headUrl" :hint="'注意：请上传小于1M的图片'" style="width:91%" />
      </el-form-item>
      <el-form-item v-if="userId != 1" label="是否可提供专票：" prop="invoiceType">
        <el-select v-model="list.invoiceType" placeholder="请选择：">
          <el-option
            v-for="item in invoiceTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>（普通发票默认可提供）
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('listFrom')">提交</el-button>
      </el-form-item>
    </el-form>
    <UpdatePasswordDialog
      :dialog-data="updatePasswordDialogData"
      :mobile="list.mobile"
      @updatePasswordSucc="getListFuc"
    />
  </el-card>
</template>
<script>
import store from '@/store'
import * as api from '@/api/my-info'
import { getId, getWorkerId } from '@/utils/auth'

import UpdatePasswordDialog from './components/UpdatePasswordDialog'

const defaultList = {
  loginName: '',
  mobile: '',
  headUrl: null,
  invoiceType: null
}
export default {
  name: 'my-info',
  components: {
    UpdatePasswordDialog
  },
  data() {
    return {
      listLoading: false,
      defaultList,
      list: Object.assign({}, defaultList),
      rules: this.rules,
      updatePasswordDialogData: {
        dialogVisible: false,
        value: '',
        id: ''
      },
      invoiceTypeOptions: this.optionsArr.isSpecialInvoice
    }
  },
  computed: {
    userId() {
      return getId()
    }
  },
  created() {
    this.getListFuc()
  },
  methods: {
    /* 重置表单 */
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.list = Object.assign({}, defaultList)
    },
    /* 获取信息 */
    getListFuc() {
      this.listLoading = true
      api
        .getList({
          workerUserId: getWorkerId()
        })
        .then(response => {
          this.listLoading = false
          let userInfo = response.data.userInfo.yzbUser
          this.list.loginName = userInfo.loginName
          this.list.mobile = userInfo.mobile
          this.list.loginName = userInfo.loginName
          if (getId() != 1) {
            this.list.headUrl = response.data.substation.headUrl
            this.list.invoiceType = response.data.invoiceType
          }
        })
        .catch(error => {
          this.listLoading = false
        })
    },
    /* 修改密码 */
    handleUpdatePasswordBtn() {
      this.updatePasswordDialogData.dialogVisible = true
      this.updatePasswordDialogData.value = this.list
    },
    /* 提交 */
    onSubmit(formName) {
      let data = {
        mobile: this.list.mobile,
        id: getId()
      }
      if (getWorkerId()) {
        data.workerUserId = getWorkerId()
      }
      if (getId() != 1) {
        data.invoiceType = this.list.invoiceType
        data.headUrl = this.list.headUrl
      }
      this.requestFuc
        .onSubmit({
          _that: this,
          formName,
          data,
          addFuc: api.updateList
        })
        .then(response => {
          this.getListFuc()
        })
    }
  }
}
</script>
<style scoped>
.form-container {
  width: 1100px;
}
</style>
